<template>
    <div style="width:100%;height: 100%;">
        <div class="taskDetails">
            <x-header header-background-color="#fff" :left-options="{showBack: true,preventGoBack:true}"  @on-click-back="GoBack">任务反馈
                <!-- <a slot="right">Feedback</a> -->
            </x-header>
            <div class="taskDetails_content">
                <div class="taskDetails_content_lists clearfix">
                    <div>
                        反馈名称
                    </div>
                    <div>
                        {{taskDetails.tasktitle}}
                    </div>
                </div>
                <div class="taskDetails_content_lists clearfix">
                    <div>
                        反馈时间
                    </div>
                    <div>
                        {{taskDetails.feedbacktime}}
                    </div>
                </div>
                <div class="taskDetails_content_lists clearfix">
                    <div>
                        当前位置
                    </div>
                    <div>
                        {{taskDetails.address}}
                    </div>
                </div>
                <div class="taskDetails_content_lists clearfix">
                    <div>
                        反馈详情
                    </div>
                    <div>
                        {{taskDetails.backinfo}}
                    </div>
                </div>
                <div class="clearfix">
                    <div class="imgsd">
                        <div class="image-choose clearfix">
                            <template v-for="(item,index) in picturelist">
                                <img :key="index" :src="item.src" style="float: left" @click="show(index)">
                            </template>
                            <previewer @on-close="ifClose" :list="picturelist" ref="preview"></previewer>
                        </div>
                        <span v-for="(item,index) in fujianlist" :key="index" @click="openFileZi(item)">
                            <img src="../../assets/images/taskList/ppt.png" alt="">
                            <i>
                                {{item.name}}
                            </i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import {XHeader,Previewer} from 'vux'
import { taskFdAjaxData,attachbyidAjaxData } from '@/assets/js/service'

export default {
  props: ["param"],
  components: {
      XHeader,
      Previewer
  },
  data () {
    return {
        taskDetails:{},
        picturelist:[],
        picturelistName:[],
        fujianlist:[]
    }
  },
  created(){
    this.$vux.loading.show({
        text: '加载中'
    });
    var _this = this;
    this.taskDetails=this.param;
     _this.taskDetails.attach.forEach(function (item) {
        if (!/(gif|jpg|jpeg|png|bmp)$/.test(item.name.toLowerCase())) {
            _this.fujianlist.push(item);
        } else {
            _this.picturelistName.push(item);
        }

    })
    for (let index = 0; index < _this.picturelistName.length; index++) {
        var param={
            "fileid":_this.picturelistName[index].id
        };
        attachbyidAjaxData(param,function(res1){
            if(res1){
                _this.picturelist.push({
                    msrc: 'data:image/png;base64,'+res1.data.base64,
                    src: 'data:image/png;base64,'+res1.data.base64
                });
            }else{
                console.log("返回数据异常",res1)
                _this.$showBottomToast("请求数据异常！")
            }
        })
    }
    _this.$vux.loading.hide();
    this.$enJsBack()//调用安卓方法（手机back键返回问题）
  },
  mounted(){
    window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
  },
  methods: {
    ifClose(){
       window.GoBack=this.GoBack;//安卓调用GoBack（手机back键返回问题）
    },
    show(index) {
        //点击图片放大
        this.$refs.preview.show(index);
        window.GoBack=this.$refs.preview.close;//安卓调用GoBack（手机back键返回问题）
    },
    openFileZi(item){
        let openFileZiol=item.name.split('.');
        console.log('.'+openFileZiol[openFileZiol.length-1])
        window.android.downloadAndOpenFileWithAttachId(item.id,'.'+openFileZiol[openFileZiol.length-1]);
    },
    GoBack(){
        this.$closeStates();
        this.$emit("close")
    },
  }
}
</script>
 
<style lang="less" scoped>
.taskDetails{
    width: 100%;
    height: 100%;
    .taskDetails_content{
        width: 100%;
        height:calc( 100% - 46px );
        background-color: #fff;
        overflow: auto;
        .taskDetails_content_lists{
            border-top: 1px solid #c7c7c7;
            div:nth-child(1){
                float: left;
                margin-left: 20px;
                height: 50px;
                font-size: 16px;
                color: #333;
                display: flex;
                align-items: center;
                margin-right: 30px;
            }
            div:nth-child(2){
                overflow: hidden;
                color: #333;
                line-height: 40px;
                padding-top: 5px;
                word-wrap: break-word;
                word-break: break-all;
            }
        }
        .taskDetails_content_lists:nth-child(1){
            border-top: none;
        }
    }
}
</style>
<style scoped="this">

.imgsd{
    border-top: 1px solid #c7c7c7;
    margin-bottom: 30px;
}
.imgsd>span{
    display: block;
    padding-left: 20px;
}
.imgsd>span>img{
    width: 20px;
    vertical-align: middle;
}
.image-choose {
    margin: 10px 10px;
}

.image-choose > img {
    margin-top: 5px;
    margin-left: 1vw;
    width: 29vw;
    height: 29vw;
    vertical-align: top;
    border-radius: 5px;
}
</style>